<template>
  <div class="f f-col h-100">
    <div class="h-100 w-100 f f-col">

      <el-header class="bfff p-r-30 t-r f j-b a-c" style="background:#1a202d;background:#1a202d;">
          <div class="cfff">消消乐后台管理系统</div>
            <el-dropdown @command="handleClick">
              <i class="el-icon-user-solid c-p cfff"><span> {{this.$store.state.user.roleName}}</span></i>
              <el-dropdown-menu class="cfff" slot="dropdown">
                <el-dropdown-item command="logout">安全退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
        </el-header>

      <el-row class="w-100 h-100 f j-s">
       <el-col :xs="3" :sm="4" :md="4" class="h-100" style="background:#1a202d;">
        <el-menu default-active="/" class="el-menu-vertical-demo b1 w-100" :collapse="isCollapse" background-color="#1a202d" text-color="#fff">
          <el-menu-item class="p-0 t-c" v-for="(item,index) in navData" :key="index" :index="item.index" @click="handleOpen(item.index)">
            <i :class="item.ico"></i>
            <span slot="title" class="hidden-xs-only">{{item.name}}</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :xs="21" :sm="20" :md="20" class="w-100 h-100 bfff">
        <router-view :key="activeDate"></router-view>
      </el-col>
      </el-row>

     </div>
    <div>
   </div>
  </div>
</template>

<script>
import { removeToken } from "../http/api";
export default {
  name: "page",
  data() {
    return {
      isCollapse: false,
      activeDate: "",
      navData: [
        { name: "官网预览", index: "0", ico: "el-icon-monitor" },
        { name: "关于我们", index: "1", ico: "el-icon-notebook-2" },
        { name: "新闻管理", index: "2", ico: "el-icon-news" },
        { name: "产品管理", index: "4", ico: "el-icon-folder-opened" },
        { name: "客户案例", index: "5", ico: "el-icon-data-board" },
        { name: "联系我们", index: "6", ico: "el-icon-data-board" },
        { name: "联系卡片", index: "8", ico: "el-icon-chat-line-round" },
        { name: "留言列表", index: "9", ico: "el-icon-message" },
        { name: "公司信息", index: "10", ico: "el-icon-office-building" },
        { name: "系统设置", index: "11", ico: "el-icon-setting" }
      ],
      isMob: false
    };
  },
  provide() {
    return {
      reload: this.reload
    };
  },
  created() {},
  watch: {},
  mounted() {
    if (this._isMobile()) {
      this.isMob = true;
    } else {
      this.isMob = false;
    }
  },
  methods: {
    handleOpen(index) {
      this.$store.commit("setNavId", index);
      this.activeDate = new Date().toString();
      if (index == 0) {
        this.$router.push({
          path: "/"
        });
      }
      if (index == 1) {
        this.$router.push({
          path: "/page/editList1"
        });
      }
      if (index == 2) {
        this.$router.push({
          path: "/page/editList2"
        });
      }
      if (index == 4) {
        this.$router.push({
          path: "/page/editList3"
        });
      }
      if (index == 5) {
        this.$router.push({
          path: "/page/editList2"
        });
      }
      if (index == 6) {
        this.$router.push({
          path: "/page/editList1"
        });
      }
      if (index == 8) {
        this.$router.push({
          path: "/page/editList1"
        });
      }
      if (index == 9) {
        this.$router.push({
          path: "/page/messageList"
        });
      }
      if (index == 10) {
        this.$router.push({
          path: "/page/basicInfo"
        });
      }
      if (index == 11) {
        this.$router.push({
          path: "/page/setUp"
        });
      }
    },
    handleClick(val) {
      if (val == "logout") {
        removeToken().then(res => {
          console.log({ 退出登录: res });
          this.$router.push("/login");
        });
      }
    },
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    }
  }
};
</script>
<style scoped>
.p-0{padding: 0 !important;}
</style>